import React, {useState} from "react";
import { CSSTransition } from "react-transition-group"

import Hello from "./components/Hello";
import Tab from "./components/Tab"

export default function LayOut() {
    const [flag, setFlag] = useState(true)
    function changFlag() {
        setFlag(!flag)
    }
    return (
        <div>
            <button onClick={changFlag}>...</button>
            <CSSTransition
                in={flag}
                classNames = {{
                    enter: "animate__animated",
                    enterActive: "animate__bounceInLeft",
                    exit: "animate__animated",
                    exitActive: "animate__bounceOutRight"
                }}
                timeout={3000}
                unmountOnExit
            >
                <div>动画内容</div>
            </CSSTransition>
        </div>
    )
}

// export default function LayOut() {
   
//     return(
//         <div>
//           <Hello />
//           <Tab />
//         </div>
//     )
// }